chrome.storage.sync.get("linkOpen", ({ linkOpen }) => {
    if (linkOpen) {
        deleteEle('readBox')
        console.log("==============", linkOpen)
        let body = document.getElementsByTagName('body')[0]
        let page = document.createElement('div');
        page.setAttribute("class", "pageBox")
        page.innerHTML = `
            <button class="preBtn">\<</button>
            <input class="pageNum" type="text">
            <button class="nextBtn">\></button>
            <button class="jumpBtn">go</button>
          <button class="saveBtn">save</button>
        `
        body.appendChild(page)
        var read = document.createElement('div');
        read.setAttribute("class", "readBox");
        var readIndex = 0
        /*
         author 杨少
        */
        chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
            chrome.storage.sync.get(['record'], function (result) {
                console.log('Value currently is ' + result.record);
                readIndex = result.record || 0
                var content = request.data[readIndex].content.replace(/\n/g, "<br />");
                read.innerHTML = `
                    <p>${request.data[readIndex].title}</p>
                    <div>${content}</div>
                `
                body.appendChild(read)
                chrome.storage.sync.get(['scrollTop'], function (result) {
                    read.scrollTop = result.scrollTop || 0
                });
            });

            if (document.getElementsByClassName("saveBtn")[0]) {
                document.getElementsByClassName("saveBtn")[0].addEventListener("click", () => {
                    chrome.storage.sync.set({record: readIndex}, function() {
                        console.log('Value is set to ' + readIndex);
                    });
                    chrome.storage.sync.set({scrollTop: read.scrollTop}, function() {
                        console.log('read.scrollTop is set to ' + read.scrollTop);
                    });
                })
                document.getElementsByClassName("jumpBtn")[0].addEventListener("click",()=>{
                    readIndex = document.getElementsByClassName("pageNum")[0].value - 1
                    var content = request.data[readIndex].content.replace(/\n/g, "<br />");
                    read.innerHTML = `
                        <p>${request.data[readIndex].title}</p>
                        <div>${content}</div>
                    `
                    read.scrollTop = 0
                })
                document.getElementsByClassName("nextBtn")[0].addEventListener("click",()=>{
                    readIndex += 1
                    var content = request.data[readIndex].content.replace(/\n/g, "<br />");
                    read.innerHTML = `
                        <p>${request.data[readIndex].title}</p>
                        <div>${content}</div>
                    `
                    read.scrollTop = 0
                })
                document.getElementsByClassName("preBtn")[0].addEventListener("click",()=>{
                    readIndex -= 1
                    var content = request.data[readIndex].content.replace(/\n/g, "<br />");
                    read.innerHTML = `
                        <p>${request.data[readIndex].title}</p>
                        <div>${content}</div>
                    `
                    read.scrollTop = 0
                })
            }

        });
    }
});

function deleteEle(name) {
    var elements = document.getElementsByClassName(name);
    var elementsArray = Array.from(elements);

    if (elementsArray.length > 1) {
        for (var i = 1; i < elementsArray.length; i++) {
            elementsArray[i].parentNode.removeChild(elementsArray[i]);
        }
    }

}